<template>
  <div class="modify-password-container">
    <el-row class="account">账号:{{ info.username }}</el-row>
    <el-button
      class="button"
      type="primary"
      @click="modifyPassowrdDialogVisible = true"
      >修改密码</el-button
    >
    <el-dialog
      v-model="modifyPassowrdDialogVisible"
      title="修改密码"
      width="50%"
    >
      <el-form
        label-width="150px"
        ref="modifyPasswordFormRef"
        :model="modifyPasswordForm"
        :rules="modifyPasswordRules"
        class="login-form"
      >
        <el-form-item prop="password_old" label="原始密码">
          <el-input
            clearable
            v-model="modifyPasswordForm.password_old"
            placeholder="请输入原始密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item prop="password" label="新密码">
          <el-input
            clearable
            v-model="modifyPasswordForm.password"
            placeholder="请输入新密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item prop="password_confirm" label="确认密码">
          <el-input
            clearable
            v-model="modifyPasswordForm.password_confirm"
            placeholder="请输入确认密码"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeModifyPasswordDialog">取消</el-button>
          <el-button type="primary" @click="modifyPassword">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { computed, reactive, ref, toRaw } from "vue";
import { resetpwd } from "@/api/api.js";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

export default {
  setup() {
    const store = useStore();
    const router = useRouter();
    //修改密码对话框
    const modifyPassowrdDialogVisible = ref(false);
    const modifyPassword = () => {
      modifyPasswordFormRef.value.validate(async (valid) => {
        if (valid) {
          const {
            data: { code, message },
          } = await resetpwd(toRaw(modifyPasswordForm));
          if (code == 0) {
            modifyPassowrdDialogVisible.value = false;
            ElMessage({
              message: message,
              type: "success",
            });
            store.dispatch("logout");
            store.dispatch("changeAccountInfo", "");
            router.replace("/login");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };
    const closeModifyPasswordDialog = () => {
      //表单重置
      modifyPasswordFormRef.value.resetFields();
      //清楚校验信息
      modifyPasswordFormRef.value.clearValidate();
      modifyPassowrdDialogVisible.value = false;
    };
    //修改密码表单
    const modifyPasswordFormRef = ref(null);
    const modifyPasswordForm = reactive({
      password_old: "",
      password: "",
      password_confirm: "",
    });
    const validateConfirmPassword = (rule, value, callback) => {
      if (modifyPasswordForm.password !== value) {
        callback(new Error("2次密码不一致"));
      } else {
        callback();
      }
    };
    const modifyPasswordRules = {
      password_old: {
        required: true,
        message: "请输入原始密码",
      },
      password: [
        {
          required: true,
          message: "请输入新密码",
        },
        { min: 8, max: 32, message: "密码长度为8-32位" },
      ],
      password_confirm: [
        {
          required: true,
          message: "请输入确认密码",
        },
        { min: 8, max: 32, message: "密码长度为8-32位" },
        {
          validator: validateConfirmPassword,
          trigger: "blur",
        },
      ],
    };
    return {
      info: computed(() => store.state.info),
      modifyPassowrdDialogVisible,
      closeModifyPasswordDialog,
      modifyPassword,
      modifyPasswordForm,
      modifyPasswordFormRef,
      modifyPasswordRules,
    };
  },
};
</script>

<style lang="less" scoped>
.modify-password-container {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: #fff;
  flex: 1;
  box-sizing: border-box;
  .button {
    margin-top: 20px;
    //flex-direction: column时align-self默认为stretch撑满
    align-self: baseline;
  }
}
</style>
